import React, { useState, useEffect, useRef } from 'react';
import { NavBar, AutoCenter, Input, Form, Button, Toast } from 'antd-mobile';
import './index.scss';
import { useHistory, useLocation } from 'umi';
let timer;

export default function Login() {
  const codet = useRef(null);
  const history = useHistory();
  const [name, setName] = useState('');
  const [phone, setPhone] = useState('');
  const [password, setPass] = useState('');
  const [time, setTime] = useState(5);
  const [disabled, setDisabled] = useState(true);
  const [btnContent, setBtnContent] = useState('获取验证码');
  const [btnDisabled, setBtnDisabled] = useState(false);
  const [sstr, setsstr] = useState('');
  const [phonecode, setcode] = useState('');

  function useVerifyPhoneNum() {
    let phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
    if (name.length == 0) {
      Toast.show({
        icon: 'fail',
        content: '请输入姓名',
      });
    } else if (!phoneReg.test(phone)) {
      Toast.show({
        icon: 'fail',
        content: '手机号错误',
      });
    } else if (phonecode.length == 0) {
      Toast.show({
        icon: 'fail',
        content: '请输入验证码',
      });
    } else if (phonecode != sstr) {
      Toast.show({
        icon: 'fail',
        content: '验证码错误',
      });
    } else {
      Toast.show({
        icon: 'success',
        content: '登录成功',
      });
      history.push({ pathname: '/home', query: { name } });
    }
  }

  useEffect(() => {
    console.log(name);
    console.log(phone);
    console.log(password);
    if ((name.length > 0) & (phone.length > 0) & (password.length > 0)) {
      console.log(2856725468457);
      setDisabled(false);
    } else {
      setDisabled(true);
    }

    return () => {
      // setDisabled(false)
    };
  }, [name, phone, password]);

  useEffect(() => {
    clearInterval(timer);
    return () => clearInterval(timer);
  }, []);

  useEffect(() => {
    if (time > 0 && time < 60) {
      setBtnContent(`${time}s后重发`);
    } else {
      clearInterval(timer);
      setBtnDisabled(false);
      setTime(60);
    }
  }, [time]);

  const getCaptcha = () => {
    let phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
    if (!phoneReg.test(phone)) {
      Toast.show({
        icon: 'fail',
        content: '请输入正确的手机号',
      });
    } else {
      if (!phone) return;
      timer = setInterval(() => setTime((pre) => pre - 1), 1000);
      setBtnDisabled(true);
      let wer = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
      let sert = '';
      for (let e = 0; e < 6; e++) {
        sert += wer[Math.ceil(Math.random() * wer.length - 1)];
      }
      // setcode(sert);
      setsstr(sert);
      Toast.show({
        content: '验证码为' + sert,
      });
    }
  };
  return (
    <div>
      <NavBar back={null} backArrow={false}>
        登录
      </NavBar>
      <AutoCenter>
        <Form
          className="autoform"
          layout="horizontal"
          footer={
            <Button
              onClick={useVerifyPhoneNum.bind(this)}
              block
              type="submit"
              color="primary"
              size="large"
            >
              提交
            </Button>
          }
        >
          <Form.Item
            label="姓名"
            name="name"
            rules={[{ message: '姓名不能为空' }]}
          >
            <Input
              placeholder="请输入姓名"
              value={name}
              onChange={(val) => {
                setName(val);
              }}
              clearable
            />
          </Form.Item>
          <Form.Item
            label="手机号"
            rules={[{ message: '手机号不能为空' }]}
            name="phone"
          >
            <Input
              placeholder="请输入手机号"
              value={phone}
              onChange={(val) => {
                setPhone(val);
              }}
              clearable
            />
          </Form.Item>
          <Form.Item
            label="短信验证码"
            rules={[{ message: '验证码不能为空' }]}
            extra={
              <Button
                color="warning"
                disabled={btnDisabled}
                onClick={getCaptcha}
              >
                {!btnDisabled ? '获取验证码' : `${time}s后重发`}
              </Button>
            }
          >
            <Input
              placeholder="请输入验证码"
              value={phonecode}
              ref={codet}
              onChange={(val) => {
                setcode(val);
              }}
            />
          </Form.Item>
        </Form>
      </AutoCenter>
    </div>
  );
}
